import React from 'react';
import { connect } from 'dva';
import { message, Divider } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import StepItem from '../../components/BatchUpload/StepItem';
import Finish from '../../components/BatchUpload/Finish';
import SelectQuo from './SelectQuo';
import QuoUpload from './QuoUpload';
import { urlParse } from '@/utils/utils';

@connect(({ batchquo, loading }) => ({
  uploading: loading.effects['batchquo/uploadFileWithProgress'],
  batchQuery: batchquo.batchQuery,
  cacheKey: batchquo.cacheKey,
  currentStep: batchquo.currentStep,
  progressPercent: batchquo.progressPercent,
  resultInfo: batchquo.resultInfo,
  showProgress: batchquo.showProgress,
}))
class Batch extends React.PureComponent {
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { batchAdjType } = urlParse(location.search);
    dispatch({
      type: 'batchquo/updateQuery',
      payload: { batchAdjType },
    });
    this.clearModel();
  }

  componentWillUnmount() {
    this.clearModel();
  }

  // 重置model
  clearModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'batchquo/updateModelData',
      payload: {
        currentStep: 0,
        progressPercent: 0,
        showProgress: false,
        batchQuery: {
          sendSuppId: undefined,
          contId: undefined,
          custId: undefined,
          oldQuoId: undefined,
          quoId: undefined,
        },
      },
    });
  };

  // 设置当前位置
  setCurrentstep = currentStep => {
    const { dispatch } = this.props;
    dispatch({
      type: 'batchquo/updateModelData',
      payload: { currentStep },
    });
    if (!currentStep) {
      dispatch({
        type: 'batchquo/updateModelData',
        payload: {
          currentStep: 0,
          progressPercent: 0,
          showProgress: false,
        },
      });
    }
  };

  // 下一步
  onNext = value => {
    const { dispatch, currentStep } = this.props;
    dispatch({
      type: 'batchquo/getDownloadInfoQuo',
      payload: value,
    }).then(response => {
      if (response.success) {
        dispatch({
          type: 'batchquo/updateModelData',
          payload: {
            cacheKey: response.data,
          },
        });
        this.setCurrentstep(currentStep + 1);
      } else {
        message.warning(`${response.message || '服务端错误：获取下载模板失败！'}`);
      }
    });
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const { cacheKey, dispatch } = this.props;
    const uploadQuery = {
      cacheKey,
    };
    // 需要携带参数即传：batchQuery，不需要传参可省略
    Object.entries(uploadQuery).forEach(([key, value]) => {
      formData.append(key, value);
    });
    dispatch({
      type: 'batchquo/uploadFileWithProgress',
      payload: formData,
    });
  };

  render() {
    const {
      dispatch,
      uploading,
      batchQuery,
      location,
      cacheKey,
      currentStep,
      showProgress,
      resultInfo,
      progressPercent,
    } = this.props;
    const isExactDiv = () => (
      <div style={{ marginTop: 50 }}>
        <div style={{ margin: '0 auto', width: '90%', fontSize: 14, textAlign: 'left' }}>
          说明：
          <br />
          1、<span style={{ color: '#000' }}>修改价格</span>
          生效日期默认当月；
          <br />
          2、<span style={{ color: '#000' }}>增加产品</span>
          的业务开始年月以及其他属性通过上传文件补充；
          <br />
          3、<span style={{ color: '#000' }}>减少产品</span>
          可分别填写结束日期，如果减少社保或公积金需要填写停做原因，如果填写结束日期不满足减员截止日要求，会自动后延；
          <br />
          4、<span style={{ color: '#000' }}>属性变更</span>对报价单下已有人员
          <span style={{ color: '#f90' }}>无影响</span>
          ，只对修改之后再增员的人员有效，如需修改已有人员可通过调整功能进行修改。
          <Divider />
          <h3>变更人员信息</h3>
        </div>
      </div>
    );
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <StepItem title="选择报价单">
            <SelectQuo
              batchQuery={batchQuery}
              onNext={value => this.onNext(value)}
              location={location}
            />
          </StepItem>
          <QuoUpload
            title="设置人员信息"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: { cacheKey },
              url: '/csApi/sendempchangeQuo/downloadTemplate',
              type: 'POST',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
            // 展示进度条需要的数据
            progressPercent={progressPercent || 0}
            progressTitle="正在提交"
            progressVisible={showProgress}
            isExact={isExactDiv}
            preStep={() => {
              this.setCurrentstep(currentStep - 1);
              dispatch({
                type: 'batchquo/updateModelData',
                payload: {
                  isGoBack: true,
                },
              });
              router.push(
                `/customservicemanage/adjusttask/batchquotation?batchAdjType=${
                  batchQuery.batchAdjType
                }`
              );
            }}
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default Batch;
